<!--
 * @Description: 第二十一章（transition动画组件） 基础用法
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-17 17:17:01
-->
<template>
  <div>
    <h1>第二十一章（transition动画组件） 基础用法</h1>
    <hr />
    <div class="container">
      <div>
        <h2>基础方式</h2>
        <p>基础方式class命名空间要和name一致</p>
        <button @click="flag1 = !flag1">switch</button>
        <Transition name="fade">
          <div v-if="flag1" class="box"></div>
        </Transition>
      </div>
      <div>
        <h2>自定义方式</h2>
        <p>自定义方式可以不要name</p>
        <button @click="flag2 = !flag2">switch</button>
        <Transition
          enter-from-class="fade-enter-from-diy"
          enter-active-class="fade-enter-active-diy"
          enter-to-class="fade-enter-to-diy"
          leave-from-class="fade-leave-from-diy"
          leave-active-class="fade-leave-active-diy"
          leave-to-class="fade-leave-to-diy"
        >
          <div v-if="flag2" class="box"></div>
        </Transition>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const flag1 = ref<boolean>(true)
const flag2 = ref<boolean>(true)
const flag3 = ref<boolean>(true)
const flag4 = ref<boolean>(true)
const flag5 = ref<boolean>(true)
</script>
<style scoped lang="less">
h1,
h2,
h3 {
  margin: 10px 0;
}

.container {
  border: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  & > div {
    width: 300px;
    height: 300px;
  }
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

//开始过度
.fade-enter-from {
  width: 0;
  height: 0;
  transform: rotate(360deg);
}

.fade-enter-from-diy {
  width: 0;
  height: 0;
  transform: rotate(360deg);
}

//开始过度了
.fade-enter-active {
  transition: all 1.5s ease;
}

.fade-enter-active-diy {
  transition: all 2s ease;
}

//过度完成
.fade-enter-to {
  background: yellow;
  width: 200px;
  height: 200px;
}

.fade-enter-to-diy {
  background: rgb(186, 10, 202);
  width: 200px;
  height: 200px;
}

//离开的过度
.fade-leave-from {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}

.fade-leave-from-diy {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}

//离开中过度
.fade-leave-active {
  transition: all 1s linear;
}

.fade-leave-active-diy {
  transition: all 1.5s linear;
}

//离开完成
.fade-leave-to {
  width: 0px;
  height: 0px;
}

.fade-leave-to-diy {
  width: 0px;
  height: 0px;
}
</style>
